<template>
    <div style="overflow-y: scroll;overflow-x: hidden;height: 100vh;">
        <div style="width: 90%;margin:20px auto 0;" ref="printContent">
            <div style="overflow: hidden;width: 100%;">
                <el-button type="primary" size="small" style="float: right;" v-print="printObj">打印</el-button>
            </div>
            <!-- padding:10px 30px -->
            <div style="max-width: 100%; " id="print-content">
                <table class="table-1">
                    <!-- 三行三列的表格 -->
                    <tr>
                        <td colspan="4" style="font-weight: 700;padding: 6px;font-size: 14px;">装修改造</td>
                    </tr>
                    <tr style="background-color: #F5FAFA;">
                        <td style="text-align: center;color: #000;width:20%">房屋地址:</td>
                        <td colspan="3">
                            {{ projectdetail.dz }}
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: center;color: #000;width:20%">档案号:</td>
                        <td style="width:40%;">
                            {{ projectdetail.dabh }}
                        </td>
                        <!-- <td style="text-align: center;font-weight: 700;color: #000;width:20%">房屋租赁单位:</td>
                        <td>
                            {{ projectdetail.fwzldw }}
                        </td> -->
                        <td style="text-align: center;color: #000;width:20%">产权单位:</td>
                        <td style="width:40%;">
                            {{ projectdetail.cqdw }}
                        </td>
                    </tr>
                    <tr style="background-color: #F5FAFA;">
                        <td style="text-align: center;color: #000;width:20%">房屋性质:</td>
                        <td style="width:40%;">
                            {{ projectdetail.fwyt }}
                        </td>
                        <td style="text-align: center;color: #000;width:20%">建筑面积:</td>
                        <td style="width:40%;">
                            {{ projectdetail.jzmj }}
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: center;color: #000;width:20%">改造方案设计单位:</td>
                        <td style="width:40%;">
                            {{ projectdetail.wxgzfasjdw }}
                        </td>
                        <td style="text-align: center;color: #000;width:20%">施工单位:</td>
                        <td style="width:40%;">
                            {{ projectdetail.sgdw }}
                        </td>
                    </tr>
                    <tr style="background-color: #F5FAFA;">
                        <td style="text-align: center;color: #000;width:20%">经办人签字:</td>
                        <td style="width:40%;">
                            {{ projectdetail.jbrqz }}
                        </td>
                        <!-- <td style="text-align: center;font-weight: 700;color: #000;width:20%">盖章文件名称:</td>
                        <td>
                            {{ projectdetail.gzwjmc }}
                        </td> -->
                        <td style="text-align: center;color: #000;width:20%">中心党委会纪要编号:</td>
                        <td style="width:40%;">
                            {{ projectdetail.jybh }}
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: center;color: #000;width:20%">办件事由:</td>
                        <td colspan="3">
                            {{ projectdetail.bjsy }}
                        </td>
                    </tr>
                    <tr><td colspan="4" style="font-weight: 700;">文件</td></tr>
                    <tr>
                        <td style="font-weight: 700;">文件类型</td>
                        <td style="font-weight: 700;">文件名称</td>
                        <td style="font-weight: 700;">是否需要盖章</td>
                        <td style="font-weight: 700;">盖章类型</td>
                        <!-- <td style="font-weight: 700;">文件名称</td> -->
                    </tr>
                    <tr v-for="(fileitem,index) in filetable" :key="index">
                        <td >{{fileitem.yjlx}}</td>
                        <td>{{fileitem.wjmc}}</td>
                        <td>{{fileitem.sfgz}}</td>
                        <td>{{fileitem.gzlx}}</td>
                        <!-- <td>{{fileitem.yjbz}}</td> -->
                    </tr>
                    <tr><td colspan="4" style="font-weight: 700;">审批意见</td></tr>
                    <tr v-for="(item,index) in tableData" :key="index">
                        <td style="text-align: center;">{{item.spyjmc}}:</td>
                        <td colspan="3">
                            {{ item.spyj }}
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
import print from 'vue-print-nb'
import { wdswdydetails } from '@/api/index';

export default {
    data: function () {
        return {
            printObj: {
                id: 'print-content',
                // popTitle: '测试表单', // 如果不设置 默认是没有值即 undifined
            },
            gdform: {},
            projectdetail: {},
            tableData: [],
            fileform: {},
            form: {},
            filetable: []
        };
    },
    directives: {
        print
    },
    methods: {
        wdswdydetails(data) {
            wdswdydetails(data).then((res) => {
                console.log('res', res)
                this.projectdetail = res.data.processtableInfo;//基础数据
                this.filetable=res.data.fileList;//文件数据
                this.tableData=res.data.spyjList;//审批意见
            });
        },
        
    },
    mounted() {
        let data = {
            caseid: this.$route.query.id
        };
        this.wdswdydetails(data);
    }
};
</script>

<style scoped>
/* @page {
    size: A4;
    margin: 0mm;
} */
</style>
<style>
@media print {
  @page {
    size: A4;
    margin: 8mm 20mm 4mm;
  }
  body, html,div{
    height: auto!important;
  }
  body{
    width: 100%;
    /* zoom:75% */
    }
}
table {
    width: 100%;
    margin: auto;
    text-align: center;
}

.table-1 {
    border: 1px solid #abacae;
    border-collapse: collapse;
    /*合并相邻表格的间距*/

}

.table-1 tr,
.table-1 td {
    font-size: 13px;
    border-collapse: collapse;
    border: 1px solid #abacae;
    /* padding: 4px; */
    box-sizing: border-box;
    color: #000000;
}
</style>